<template>
  <div id="category">
    <!-- 导航栏 -->
    <nav-bar class="nav-bar"><div slot="center">商品分类</div></nav-bar>
    <div class="content">

      <!-- 左侧面导航菜单 -->
      <tab-menu :categories="categories"
                @selectItem="selectItem"
                />

      <scroll id="tab-content"
              :data="[categoryData]"
              ref="scroll">
          <div>

            <!-- 每个类别中的商品展示 -->
            <tab-content-category :subcategories="showSubcategory"/>
           
            <!-- 内部导航栏 -->
            <tab-control :titles="['综合','新品','销量']"
                          @tabClick="tabClick"/>
            <!-- 每个分类中--内部导航栏中商品推荐 -->
            <goods-list :goods="showCategoryDetail"/>
          </div>
      </scroll>
    </div>
  </div>
</template>

<script>
import NavBar from "components/common/navbar/NavBar.vue";

import TabMenu from './childComps/TabMenu.vue';
import TabContentCategory from './childComps/TabContentCategory.vue';


import TabControl from 'components/content/tabcontrol/TabControl'
import Scroll from 'components/common/scroll/Scroll.vue';
import GoodsList from 'components/content/goods/GoodsList.vue';


//网络请求
import {getCategory,getSubcategory,getCategoryDetail} from 'network/category';
import {POP,NEW,SELL} from 'common/const';

//混入
import {tabControlMixin} from "common/mixin";

export default {
  name: "Category",
  components: { 
    NavBar,
    TabMenu,
    TabControl,
    Scroll,
    TabContentCategory,
    GoodsList,
  },
   mixins: [tabControlMixin],
  data() {
    return {
      categories:[], //传递给TabMenu的数组
      categoryData:{},
      currentIndex:-1
    }
  },
  created(){
    //1.请求数据分类
    this._getCategory()
  },
  computed:{
    showSubcategory(){
      if(this.currentIndex===-1) return {}
      return this.categoryData[this.currentIndex].subcategories
    },
    showCategoryDetail(){
      if(this.currentIndex===-1) return []
      return this.categoryData[this.currentIndex].categoryDetail[this.currentType]
    }

  },
  methods: {
    /* 网络请求相关的方法 */
    _getCategory(){
      getCategory().then(res=>{
        //1.获取分类的数据
        // console.log(res);
        this.categories=res.data.category.list
        //2.初始化每个类别的子数据
        for(let i=0;i<this.categories.length;i++){
          this.categoryData[i]={
            subcategories:{},
            categoryDetail:{
              'pop':[],
              'new':[],
              'sell':[]
            }
          }
        }
        //3.请求左侧导航栏第一个分类的数据
        this._getSubcategories(0);
      })
    },
    _getSubcategories(index){
      this.currentIndex=index;
      const mailKey=this.categories[index].maitKey;
      getSubcategory(mailKey).then(res=>{
        // console.log(res);

        this.categoryData[index].subcategories=res.data;
        this.categoryData={...this.categoryData}  //自己拷贝自己的意思
        this._getCategoryDetail(POP)
        this._getCategoryDetail(SELL)
        this._getCategoryDetail(NEW)
      })
    },
    _getCategoryDetail(type){
      // console.log(type);
      //1.获取请求的miniWallkey
      const miniWallkey=this.categories[this.currentIndex].miniWallkey;
      //2.发送请求,传入miniWallkey和type
        getCategoryDetail(miniWallkey,type).then(res=>{
          //3.将获取的数据保存下来

          // console.log(res);
          this.categoryData[this.currentIndex].categoryDetail[type]=res;
          this.categoryData={...this.categoryData}
        })
    },

    /*
     事件响应相关的方法
     */
    selectItem(index){
      this._getSubcategories(index)
    }
  },
};
</script>

<style scoped>
#category {
  height: 100vh;
}
.nav-bar {
  background-color: var(--color-tint);
  color: #fff;
}
.content {
  position: absolute;
  left: 0;
  right: 0;
  top: 44px;
  bottom: 49px;
  overflow: hidden;
  display: flex;
}
#tab-content {
  height: 100%;
  flex: 1;
}
</style>